<template>
  <section class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="pt-1">
        <div class="mb-8 flex items-center justify-between">
          <div>
            <p class="text-sm font-medium mb-2 paragraph-subhealing" style="color: #2b649c;">PARTNERSHIP</p>
            <h2 class="text-4xl font-bold text-gray-900 paragraph-healing">Collaboration Network</h2>
          </div>
          <div class="flex items-center space-x-4">
            <button
              @click="previousSlide"
              :disabled="isFirstPage"
              class="w-10 h-10 rounded-full border flex items-center justify-center transition-colors"
              :class="isFirstPage ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'"
              :style="isFirstPage ? 'background-color: #9ca3af; border-color: #9ca3af;' : 'background-color: #2b649c; border-color: #2b649c; box-shadow: 0 4px 12px rgba(43, 100, 156, 0.3);'"
            >
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
              </svg>
            </button>
            <button
              @click="nextSlide"
              :disabled="isLastPage"
              class="w-10 h-10 rounded-full border flex items-center justify-center transition-colors"
              :class="isLastPage ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'"
              :style="isLastPage ? 'background-color: #9ca3af; border-color: #9ca3af;' : 'background-color: #2b649c; border-color: #2b649c; box-shadow: 0 4px 12px rgba(43, 100, 156, 0.3);'"
            >
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
              </svg>
            </button>
          </div>
        </div>

        <!-- 6列轮播布局 -->
        <div class="relative overflow-hidden carousel-container px-1 mb-10" ref="containerRef">
          <div
            class="flex transition-transform duration-500 ease-in-out"
            :style="{
              transform: `translateX(-${currentSlide * slideWidth}px)`,
              marginLeft: `-${marginHorizontal / 4}px`,
              marginRight: `-${marginHorizontal / 4}px`
            }"
          >
            <div
              v-for="(partner, index) in partners"
              :key="index"
              class="flex-shrink-0"
              :style="{
                marginLeft: (marginHorizontal / 2) + 'px',
                marginRight: (marginHorizontal / 2) + 'px',
                width: logoWidth + 'px'
              }"
            >
              <a :href="partner.url" target="_blank" class="block">
                <div
                  class="partner-logo-container border border-gray-200"
                  :style="{
                    width: logoWidth + 'px',
                    height: logoHeight + 'px'
                  }"
                >
                  <img
                    :src="partner.image"
                    :alt="partner.name"
                    class="max-h-16 w-auto object-contain"
                  >
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref, nextTick } from 'vue'

const currentSlide = ref(0)
const containerRef = ref(null)
const containerWidth = ref(0)
const scaleRatio = ref(1)

// 基础尺寸
const baseLogoWidth = 206
const baseLogoHeight = 140
const baseMarginHorizontal = 73 // 总间隔，左右各一半
const baseSlideWidth = baseLogoWidth * 6 + baseMarginHorizontal * 6 // 1674px (206*6 + 73*6)

// 计算缩放比例
const calculateScale = () => {
  if (!containerRef.value) return

  const container = containerRef.value
  containerWidth.value = container.offsetWidth

  // 计算缩放比例，确保6个logo能完全显示在容器内
  // 减去左右各1px的padding
  const availableWidth = containerWidth.value - 2
  const requiredWidth = baseSlideWidth

  if (availableWidth < requiredWidth) {
    scaleRatio.value = availableWidth / requiredWidth
  } else {
    scaleRatio.value = 1
  }
}

// 响应式计算各种尺寸
const logoWidth = computed(() => Math.floor(baseLogoWidth * scaleRatio.value))
const logoHeight = computed(() => Math.floor(baseLogoHeight * scaleRatio.value))
const marginHorizontal = computed(() => Math.floor(baseMarginHorizontal * scaleRatio.value))
const slideWidth = computed(() => Math.floor(baseSlideWidth * scaleRatio.value))

// 计算总页数 - 每页显示6个
const totalPages = computed(() => Math.ceil(partners.length / 6))

// 判断是否为第一页
const isFirstPage = computed(() => currentSlide.value === 0)

// 判断是否为最后一页
const isLastPage = computed(() => currentSlide.value === totalPages.value - 1)

// 合作伙伴数据

const partners = [
  {
    name: '中科院',
    image: '/images/1_1649131169635.png',
    url: 'https://www.cas.cn'
  },
  {
    name: '壳牌',
    image: '/images/2_1649131189178.png',
    url: 'https://www.shell.com.cn'
  },
  {
    name: 'IMF',
    image: '/images/3_1649131225517.png',
    url: 'https://www.imf.org/zh/home'
  },
  {
    name: 'CET',
    image: '/images/4_1649131264102.png',
    url: 'http://www.cet.net.cn'
  },
  {
    name: 'CEIC',
    image: '/images/5_1649131286681.png',
    url: 'https://www.ceic.com'
  },
  {
    name: 'Jonoon',
    image: '/images/6_1649131304328.png',
    url: 'http://www.jonoon.com.cn'
  },
  {
    name: 'CECEP',
    image: '/images/7_1649131325987.png',
    url: 'http://www.cecep.cn'
  },
  {
    name: '清华大学',
    image: '/images/14_1649132408519.png',
    url: 'https://www.tsinghua.edu.cn'
  },
  {
    name: '国网能源院',
    image: '/images/13_1649132427162.png',
    url: 'http://www.sgeri.sgcc.com.cn'
  },
  {
    name: 'IAMC',
    image: '/images/IAMC透明_1650035780360.png',
    url: 'https://www.iamconsortium.org/'
  }
]

const previousSlide = () => {
  if (!isFirstPage.value) {
    currentSlide.value = currentSlide.value - 1
  }
}

const nextSlide = () => {
  if (!isLastPage.value) {
    currentSlide.value = currentSlide.value + 1
  }
}

let autoSlideInterval
let resizeObserver

onMounted(async () => {
  // 等待DOM渲染完成后计算尺寸
  await nextTick()
  calculateScale()

  // 监听容器尺寸变化
  if (containerRef.value && window.ResizeObserver) {
    resizeObserver = new ResizeObserver(() => {
      calculateScale()
    })
    resizeObserver.observe(containerRef.value)
  }

  // 监听窗口尺寸变化作为备用
  window.addEventListener('resize', calculateScale)

  // Auto slide every 6 seconds, but stop at last page
  autoSlideInterval = setInterval(() => {
    if (!isLastPage.value) {
      nextSlide()
    } else {
      // Reset to first page when reaching the end
      currentSlide.value = 0
    }
  }, 6000)
})

onUnmounted(() => {
  if (autoSlideInterval) {
    clearInterval(autoSlideInterval)
  }

  if (resizeObserver) {
    resizeObserver.disconnect()
  }

  window.removeEventListener('resize', calculateScale)
})
</script>

<style scoped>

.partner-logo-container {
  background: #FFFFFF;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: pointer;
}
  /** 段落标题 */
  .paragraph-healing {
    font-weight: bold;
    font-size: 48px;
    color: #1F2220;
    line-height: 90px;
  }
  .paragraph-subhealing {
    font-weight: 500;
    font-size: 20px;
    color: #2B649C;
    line-height: 20px;
  }
</style>
